<template>
  <div class="divBox">
    <el-card class="box-card">
      <form-create
        v-if="FormData"
        ref="fc"
        v-loading="loading"
        :option="option"
        :rule="FormData.rule"
        class="formBox"
        handle-icon="false"
        @submit="onSubmit"
      />
    </el-card>
  </div>
</template>

<script>

import formCreate from '@form-create/element-ui'
import { integralConfigApi } from '@/api/marketing'
import request from '@/api/request'

export default {
  name: 'IntegralConfig',
  data() {
    return {
      option: {
        form: {
          labelWidth: '150px',
          size: "small",
        },    
        global: {
          upload: {
            props: {
              onSuccess(rep, file) {
                if (rep.status === 200) {
                  file.url = rep.data.src
                }
              }
            }
          }
        }
      },
      FormData: null,
      loading: false,
      titles: ""
    }
  },
  components: {
    formCreate: formCreate.$form()
  },
  mounted() {
    this.getFrom();
  },
  watch:{
    '$route.path': {   
      handler: function() {
        this.getFrom();
      },
      immediate: false,
      deep: true
    },
  },
  methods: {
    setTagsViewTitle() {
      this.deepTraversal(this.menuList, "children");
      const route = Object.assign({}, this.tempRoute, { title: this.titles });
      this.$store.dispatch("tagsView/updateVisitedView", route);
    },
    deepTraversal(arr, child) {
      const that = this;
      function traversal(a) {
        a.forEach(o => {
          if (
            o.path.indexOf("Basics") !== -1 &&
            o.path === that.$route.path
          ) {
            that.titles = o.title;
            return;
          }
          if (o[child] && o[child].length) {
            traversal(o[child]);
          }
        });
      }

      traversal(arr);
    },
    getFrom() {
      this.loading = true
      integralConfigApi('integral').then(async res => {
        this.FormData = res.data
        this.loading = false
      }).catch(res => {
        this.$message.error(res.message)
        this.loading = false
      })
    },
    onSubmit(formData) {
      request[this.FormData.method.toLowerCase()](this.FormData.api, formData).then((res) => {
        this.$message.success(res.message || '提交成功')
      }).catch(err => {
        this.$message.error(err.message || '提交失败')
      })
    }
  }
}
</script>

<style scoped>

</style>
